<template>
    <div class="main-content">
        <div class="search between">
            <div class="query">
                <el-date-picker v-model="params.time" type="datetimerange" range-separator="至" start-placeholder="创建时间"
                    end-placeholder="创建时间" value-format="YYYY-MM-DD HH:mm:ss" @change="getTable" />
                <el-input style="width: 180px;" placeholder="编码" v-model="params.code" clearable
                    @change="getTable"></el-input>
                <el-input style="width: 180px;" placeholder="名称" v-model="params.name" clearable
                    @change="getTable"></el-input>

                <el-select style="width: 180px;" v-model="params.state" placeholder="状态" clearable @change="getTable">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="2" />
                </el-select>

                <span class="fold" v-show="isFold">
                </span>
                <!-- <el-button class="ico-button" @click="switchFold" :icon="isFold ? 'ArrowUp' : 'ArrowDown'"></el-button> -->
            </div>
            <div class="set-group">
                <el-button @click="add" type="primary" v-auth="'couponLinkAdd'">新增</el-button>
                <el-button class="ico-button" @click="refresh">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>
        </div>
        <div class="table">
            <div class="table-main">
                <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%"
                    v-loading="table.load">
                    <template v-for="row in table.column">
                        <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
                            :fixed="row.fixed">
                            <template #default="scope">
                                <span v-if="row.key == 'state'">
                                    <el-tag type="success" v-if="scope.row[row.key] == 1">{{ scope.row.state_name
                                        }}</el-tag>
                                    <el-tag type="danger" v-else-if="scope.row[row.key] == 2">{{ scope.row.state_name
                                        }}</el-tag>
                                    <el-tag type="info" v-else>{{ scope.row.state_name }}</el-tag>
                                </span>
                                <span v-else>
                                    {{ scope.row[row.key] }}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label="相关操作" column-key="handle" width="160" align="center" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                              <el-button link type="primary" @click="edit(scope.row)" >编辑</el-button>
                              <el-popconfirm popper-class="limit-popper" title="确定要删除吗?" @confirm="del(scope.row)" >
                                  <template #reference>
                                      <el-button link type="danger">删除</el-button>
                                  </template>
                              </el-popconfirm>
                          </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
                    :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next" :total="pages.count" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>
<script setup name="CouponLinkList">

const { proxy } = getCurrentInstance()

// 搜索表单 下拉收起 start 
const isFold = ref(false)
function switchFold() {
    isFold.value = !isFold.value
}
// 搜索表单 下拉收起 end

// 表格字段配置 start
const table = reactive({
    load: false,
    column: [
        { label: 'ID', key: 'id', width: '100', show: true, align: 'center' },
        { label: '编码', key: 'code', width: '120', show: true, align: 'center' },
        { label: '名称', key: 'name', width: 'auto', show: true, align: 'center' },
        { label: '券组链接', key: 'page', width: '280', show: true, align: 'center' },
        { label: '状态', key: 'state', width: '100', show: true, align: 'center' },
        { label: '领取开始时间', key: 'start_time', width: '180', show: true, align: 'center' },
        { label: '领取结束时间', key: 'end_time', width: '180', show: true, align: 'center' },
        { label: '创建时间', key: 'create_time', width: '180', show: true, align: 'center' },
        { label: '更新时间', key: 'update_time', width: '180', show: true, align: 'center' },
    ],
    data: []
})
// 表格字段配置 end 

onMounted(() => {
    getTable()
})

const date = new Date();
const cYear = date.getFullYear();
const currentMonth = date.getMonth() + 1;
const cMonth = currentMonth.toString().padStart(2, '0'); // 月份从0开始，所以要+1，并用0填充
var cDay = date.getDate().toString().padStart(2, '0');            // 用0填充日期

date.setMonth(date.getMonth() - 1);
const pYear = date.getFullYear();
const pMonth = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要+1，并用0填充
var pDay = date.getDate().toString().padStart(2, '0');            // 用0填充日期

// 页面数据 start
const params = reactive({
    code: '',
    name: '',
    state: '',
    erp_code: '',
    time: '',
})
// [pYear + '-' + pMonth + '-' + pDay + ' 00:00:00', cYear + '-' + cMonth + '-' + cDay + ' 23:59:59'],
const pages = reactive({
    page: 1,
    page_size: 30,
    count: 0
})

function handleSizeChange(val) {
    pages.page_size = val
    getTable()
}
function handleCurrentChange(val) {
    pages.page = val
    getTable()
}
function refresh() {
    pages.page = 1
    getTable()
}
async function getTable() {
    table.load = true
    let res = await proxy.$get('ActiveCouponLinkList', {
        page: pages.page,
        page_size: pages.page_size,
        ...params
    }, false)
    table.load = false
    if (res.code === 0) {
        table.data = res.data.list || []
        pages.count = res.data.total ? Number(res.data.total) : 0
    }
}

// 页面数据 end

// 增删改 start
function add() {
    proxy.$bus.emit('tabSwitch', 'ActiveCouponGroupDetail');
}
function edit(row) {
    proxy.$bus.emit('tabSwitch', { key: 'ActiveCouponGroupDetail', query: { id: row.id } });
}

async function del(row) {
  let res = await proxy.$post('ActiveCouponLinkDel', {
      id: row.id
  })
  if (res.code === 0) {
      ElMessage({
          type: 'success',
          message: '删除成功'
      });
      getTable()
  }
}
// 增删改 end

</script>
<style scoped>
.read-the-docs {
    color: #888;
}

.import-box {
    display: inline-block;
    position: relative;
    margin: 0 10px;

}

.text-under {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>